<template>
  <div>
    <!-- 添加搜索框 -->
    <div class="search-wrapper" style="margin-bottom: 20px">
      <label>搜索订单：</label>
      <el-input
        v-model="searchQuery"
        prefix-icon="el-icon-search"
        placeholder="输入订单号搜索"
        clearable
        style="width: 300px"
      ></el-input>
    </div>
    <h1>订单管理</h1>
    <el-row>
      <el-col v-for="order in filteredOrderList" :key="order.id" :span="12">
        <el-card
          class="order-item"
          shadow="hover"
          :body-style="{ padding: '0' }"
          v-if="shouldShow(order)"
        >
          <div class="order-container">
            <!-- 头部 -->
            <div class="order-header">
              <div class="order-meta">
                <el-tag type="success" effect="dark">交易成功</el-tag>
                <span class="order-id">订单号：{{ order.order_id }}</span>
              </div>
              <br />
              <span class="order-date">交易时间： {{ order.order_Date }}</span>
            </div>

            <!-- 主体内容 -->
            <div class="order-body">
              <div class="amount-section">
                <span class="amount-label">总金额</span>
                <span class="amount-value">¥{{ order.price }}</span>
              </div>

              <div class="parties">
                <div class="party">
                  <i class="el-icon-user"></i>
                  <span class="party-role">甲方</span>
                  <span class="party-name">{{ order.order_a }}</span>
                </div>
                <i class="arrow el-icon-back"></i>
                <div class="party">
                  <i class="el-icon-office-building"></i>
                  <span class="party-role">乙方</span>
                  <span class="party-name">{{ order.order_b }}</span>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="order-actions">
              <el-button-group>
                <el-button
                  type="primary"
                  size="small"
                  @click="showDetail(order)"
                  icon="el-icon-view"
                >
                  查看详情
                </el-button>
                <el-button
                  v-if="loginPerson.customer_type === 'user'"
                  type="danger"
                  size="small"
                  :disabled="true"
                  icon="el-icon-delete"
                >
                  删除订单
                </el-button>
                <el-button
                  v-if="loginPerson.customer_type !== 'user'"
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  @click="deleteOrder(order.order_id)"
                >
                  删除订单
                </el-button>
              </el-button-group>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="70%">
      <el-table :data="currentOrder?.product_list" border style="width: 100%">
        <el-table-column prop="product_id" label="商品ID" width="120" />
        <el-table-column label="商品图片" width="120">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.img"
              style="width: 80px; height: 80px"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="product_name" label="商品名称" />
        <el-table-column prop="price" label="单价" width="100" />
        <el-table-column prop="number" label="数量" width="100" />
        <el-table-column label="小计" width="120">
          <template slot-scope="scope">
            ¥{{ (scope.row.price * scope.row.number).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "OrderManagement",
  data() {
    return {
      searchQuery: "", // 添加搜索关键词
      detailDialogVisible: false,
      currentOrder: null,
    };
  },
  computed: {
    ...mapState({
      orderList: (state) => state.order.orderList,
    }),
    // 添加过滤后的订单列表
    filteredOrderList() {
      return this.orderList.filter((order) =>
        order.order_id
          .toString()
          .toLowerCase()
          .includes(this.searchQuery.toLowerCase())
      );
    },
    loginPerson() {
      return JSON.parse(localStorage.getItem("loginPerson"));
    },
  },
  created() {
    this.$store.dispatch("order/getOrderList"); // 获取订单列表
  },
  methods: {
    shouldShow(order) {
      return [order.order_a_id, order.order_b_id].includes(
        this.loginPerson?.id
      );
    },
    deleteOrder(orderId) {
      this.$confirm("确认删除该订单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("order/deleteOrder", orderId);
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    showDetail(order) {
      this.currentOrder = order;
      this.detailDialogVisible = true;
    },
  },
};
</script>

<style lang="scss">
// 添加搜索框样式
.search-wrapper {
  margin: 20px 0;
  label {
    margin-right: 10px;
    color: #606266;
  }
}
.order-item {
  margin: 16px 0;
  transition: all 0.3s ease;
}

.order-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.order-container {
  padding: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.order-id {
  margin-left: 12px;
  color: #666;
}

.order-date {
  color: #999;
}

.amount-section {
  display: flex;
  align-items: baseline;
  margin: 16px 0;
}

.amount-label {
  font-size: 14px;
  color: #666;
}

.amount-value {
  font-size: 24px;
  color: #f56c6c;
  margin-left: 8px;
  font-weight: 600;
}

.parties {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.party {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  background: #f8f8f8;
}

.party i {
  font-size: 24px;
  color: #409eff;
}

.party-role {
  display: block;
  color: #999;
  font-size: 12px;
}

.party-name {
  display: block;
  font-weight: 500;
  margin-top: 4px;
}

.arrow {
  margin: 0 20px;
  color: #ccc;
}

.order-actions {
  border-top: 1px solid #eee;
  padding-top: 16px;
  text-align: right;
}

@media (max-width: 768px) {
  .order-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-date {
    margin-top: 8px;
  }
}
</style>
